<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <meta HTTP-EQUIV="expires" CONTENT="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区域详情</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/ui.css" rel="stylesheet">
    <link href="css/control.css" rel="stylesheet" >
    <link href="css/layui.css" rel="stylesheet">
    <style>
        #body {
            width: 100%;
            max-height: 100%;
            overflow-y: scroll;
            overflow-x: hidden;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        img{
            width: 20%;
        }

        th,
        td {
            text-align: center;
        }
        .form-group-self {
            margin-top: 15px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body class="gray-bg animated fadeInRight">
<div id="body">
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">

                    <div class="form-group-self">
                        <div class="col-sm-2">
                            <!--<label class="col-xs-3 control-label" style="width: 75px;margin-top: 5px;">桩：</label>-->
                            <div class="layui-input-inline layui-form">
                                <select id="pile" lay-filter="zhuang">
                                    <option data-hidden="true" value="0" disable>请选择桩</option>
                                   <!-- <option value="1">后台管理</option>
                                    <option value="2" >app客户端</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <!--<label class="col-xs-3 control-label" style="width: 75px;margin-top: 5px;">钻孔：</label>-->
                            <div class="layui-input-inline layui-form">
                                <select id="drilling">
                                    <option data-hidden="true" value="0" disable>请选择钻孔</option>
                                   <!-- <option value="1">后台管理</option>
                                    <option value="2" >app客户端</option>-->
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-1">
                            <button class="btn btn-success btn-sm" onclick="initPicList()" title="搜索" id="search">搜索</button>
                        </div>
                        <div class="fr">
                            <button id="flipthis" onclick="backForwardListen()" class="btn ">返回列表</button>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <!--<table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="50%">名称</th>
                                <th width="50%">图片</th>
                            </tr>
                            </thead>
                            <tbody id="list">
                            </tbody>
                        </table>-->
                        <div>
                            <label id="zhuang" class="col-xs-3 control-label sr-only" style="width: 75px;margin-top: 5px;">桩：</label>
                            <div class="container" id="zhuangList">
                            </div>
                        </div>

                        <div>
                            <label id="zuankong" class="col-xs-3 control-label sr-only" style="width: 75px;margin-top: 5px;">钻孔：</label>
                            <div class="container" id="zuankongList">
                            </div>
                        </div>

                        <div>
                            <label id="zuanji" class="col-xs-3 control-label sr-only" style="width: 75px;margin-top: 5px;">钻机：</label>
                            <div class="container" id="zuanjiList">
                            </div>
                        </div>

                        <div>
                            <label id="xinyang" class="col-xs-3 control-label sr-only" style="width: 75px;margin-top: 5px;">芯样：</label>
                            <div class="container" id="xinyangList">
                            </div>
                        </div>

                        <div>
                            <label id="baobiao" class="col-xs-3 control-label sr-only" style="width: 75px;margin-top: 5px;">报表：</label>
                            <div class="container" id="baobiaoList">
                            </div>
                        </div>

                    </div>
                    <!--<div id="pageRow" class="fixBottom">
                        <div class="fr" id="page">
                            <ul class="pagination" style="margin:0;float:right;">
                                <li class="paginate_button" id="firstPage">
                                    <a href="javascript:"></a>
                                </li>
                                <li class="paginate_button" id="previousPage">
                                    <a href="javascript:">
                                        <</a>
                                </li>
                                <li class="paginate_button">
                                    <a href="javascript:" style="padding:0">
                                        <select class="" name="" style="padding:4px 10px" id="pageInfo">
                                        </select>
                                    </a>
                                </li>
                                <li class="paginate_button" id="nextPage">
                                    <a href="javascript:">></a>
                                </li>
                                <li class="paginate_button" id="lastPage">
                                    <a href="javascript:">>></a>
                                </li>
                            </ul>
                        </div>

                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/work/common.js"></script>
<script src="js/plugins/laydate/laydate.js"></script>
<script src="js/plugins/layer/layer.min.js"></script>
<script src="js/plugins/layer/layer.js"></script>
<!-- 自定义js -->
<script src="js/content.js"></script>
<script src="js/layui.js"></script>
<script>
    // layui表单使用
    var form = null;
    layui.use(['form'], function () {
        form = layui.form;
        form.on('select(zhuang)', function (data) {
            initDrillingData(data.value);
        });
    })
    var regionId = getStorage("regionId");
    $(document).ready(function () {
        setTimeout(function () {
            initPileData();
        },200)

        // $("#list").on("dblclick", ".viewDb", function () {
        //     var id = $(this).attr("data-val");
        //     setStorage("memberId", id);
        //     window.location.href = "memberMsg.html";
        // });
    });

    function initPileData() {
        ajax({
            url: "pile/showPile",
            type: "POST",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data: JSON.stringify({regionId: regionId}),
            timeout: 10000,
            contentType: "application/json;charset=utf-8",
            error: function (xhr, type) {
                layer.msg("服务器异常，请稍后重试！", {time: 2000})
            },
            successx: function (data) {
                if (data.success == true) {
                    setPile(data.data);
                } else {
                    layer.msg(data.message, {time: 1000})
                }
            }
        });

    }

    function setPile(data) {
        if (data == null) {
            return;
        }
        $("#pile").html("");
        var optionHtml = '<option value="0">请选择桩</option>';
        for (var i = 0; i < data.length ; i++) {
            var option =  '<option value="'+data[i].id+'">'+data[i].pileNumber+'</option>';
            optionHtml += option;
        }
        $("#pile").html(optionHtml);
        form.render();
    }

    function initDrillingData(pileId) {
        ajax({
            url: "pile/showPileDetail",
            type: "POST",
            dataType: "json",
            xhrFields: {
                withCredentials: true
            },
            crossDomain: true,
            data: JSON.stringify({pileId: pileId}),
            timeout: 10000,
            contentType: "application/json;charset=utf-8",
            error: function (xhr, type) {
                layer.msg("服务器异常，请稍后重试！", {time: 2000})
            },
            successx: function (data) {
                if (data.success == true) {
                    setDrilling(data.data);
                } else {
                    layer.msg(data.message, {time: 1000})
                }
            }
        });

    }

    function setDrilling(data) {
        console.log(data);
        var optionHtml = '<option value="0">请选择钻孔</option>';
        if (data!=null && data.tDrillingDetails!=null && data.tDrillingDetails != undefined && data.tDrillingDetails.length != 0) {
            $("#drilling").html("");
            for (var i = 0; i < data.tDrillingDetails.length ; i++) {
                var option =  '<option value="'+data.tDrillingDetails[i].id+'">'+data.tDrillingDetails[i].drillingNo+'</option>';
                optionHtml += option;
            }

        }
        $("#drilling").html(optionHtml);
        form.render();

    }


    // 获取图片列表
    function initPicList() {
        var zhuangValue=$('#pile option:selected').val();
        var zuankongValue=$('#drilling option:selected').val();
        if(isNULL(zuankongValue) || zuankongValue==0){
            alert("请选择钻孔");
            $("#zhuangList,#zuankongList,#zuanjiList,#xinyangList,#baobiaoList").empty();
            return;
        }
        ajax({
            url: "pile/showRegionImgs",
            data: {drillingId:zuankongValue},
            successx: function (data) {
                if (data.success) {
                    creatList(data.data);
                } else {
                    layer.msg(data.message)
                }
            }
        });
    }

    /**
     * 创建表单数据
     * @param data
     */
    function creatList(data) {
        if(data==null){
            return;
        }
        console.log(data.pileImgs+"==============");
        var zhuang = '';
        if (data.pileImgs != undefined || data.pileImgs.length != 0) {
            for (var i = 0; i < data.pileImgs.length; i++) {
                console.log(data.pileImgs[i]+"=======")
                zhuang += '<img src="' + picPath + '' + data.pileImgs[i]+ '"  class="img-thumbnail">'
            }
            $("#zhuang").removeClass('sr-only');
            $("#zhuangList").empty().append(zhuang);
        }


        if (data.drillingImgs != undefined || data.drillingImgs.length != 0) {
            var zuankong = '';
            for (var i = 0; i < data.drillingImgs.length; i++) {
                zuankong += '<img src="' + picPath + '' + data.drillingImgs[i]+ '"   class="img-thumbnail">'
            }
            $("#zuankong").removeClass('sr-only');
            $("#zuankongList").empty().append(zuankong);
        }


        if (data.rigImgs != undefined || data.rigImgs.length != 0) {
            var zuanji = '';
            for (var i = 0; i < data.rigImgs.length; i++) {
                zuanji += '<img src="' + picPath + '' + data.rigImgs[i]+ '"  class="img-thumbnail">'
            }
            $("#zuanji").removeClass('sr-only');
            $("#zuanjiList").empty().append(zuanji);
        }



        if (data.coreImgs != undefined || data.coreImgs.length != 0) {
            var xinyang = '';
            for (var i = 0; i < data.coreImgs.length; i++) {
                xinyang += '<img src="' + picPath + '' + data.coreImgs[i]+ '"  class="img-thumbnail">'
            }
            $("#xinyang").removeClass('sr-only');
            $("#xinyangList").empty().append(xinyang);
        }

        if (data.reportFormImgs != undefined || data.reportFormImgs.length != 0) {
            var baobiao = '';
            for (var i = 0; i < data.reportFormImgs.length; i++) {
                baobiao += '<img src="' + picPath + '' + data.reportFormImgs[i]+ '"  class="img-thumbnail">'
            }
            $("#baobiao").removeClass('sr-only');
            $("#baobiaoList").empty().append(baobiao);
        }

    }
</script>
</body>

</html>